<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Football Data Collection Panel</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .control-panel {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .status-panel {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            background-color: #f8f9fa;
        }
        .button-group {
            margin: 20px 0;
        }
        button {
            padding: 10px 20px;
            margin-right: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .start-btn {
            background-color: #28a745;
            color: white;
        }
        .stop-btn {
            background-color: #dc3545;
            color: white;
        }
        .config-btn {
            background-color: #007bff;
            color: white;
        }
        pre {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            max-height: 400px;
        }
        .status {
            font-weight: bold;
            margin-bottom: 10px;
        }
        .running {
            color: #28a745;
        }
        .stopped {
            color: #dc3545;
        }
        .error {
            color: #dc3545;
            margin-top: 10px;
            padding: 10px;
            background-color: #fff3f3;
            border-radius: 4px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="control-panel">
        <h1>Football Data Collection Panel</h1>
        
        <div class="button-group">
            <button class="start-btn" onclick="startCollection()" id="startBtn">Start Collection</button>
            <button class="stop-btn" onclick="stopCollection()" id="stopBtn">Stop</button>
            <button class="config-btn" onclick="showConfig()">Config</button>
        </div>

        <div class="error" id="errorMessage"></div>

        <div class="status-panel">
            <div class="status">Status: <span id="status" class="stopped">Stopped</span></div>
            <div>Last Collection: <span id="lastCollectTime">-</span></div>
            <div>Collection Count: <span id="collectCount">0</span></div>
        </div>

        <div class="status-panel">
            <h3>Latest Data</h3>
            <pre id="latestData">No data yet</pre>
        </div>
    </div>

    <script>
        let isCollecting = false;
        let collectionInterval;
        let collectCount = 0;
        const API_URL = 'http://localhost:3456';

        // 检查服务器状态
        async function checkServerStatus() {
            try {
                const response = await fetch(`${API_URL}/health`);
                if (response.ok) {
                    hideError();
                    return true;
                }
                showError('Server is not responding');
                return false;
            } catch (error) {
                showError('Cannot connect to server');
                return false;
            }
        }

        function showError(message) {
            const errorElement = document.getElementById('errorMessage');
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }

        function hideError() {
            document.getElementById('errorMessage').style.display = 'none';
        }

        async function startCollection() {
            if (isCollecting) return;
            
            const serverOk = await checkServerStatus();
            if (!serverOk) return;

            isCollecting = true;
            document.getElementById('status').textContent = 'Running';
            document.getElementById('status').className = 'running';
            document.getElementById('startBtn').disabled = true;
            document.getElementById('stopBtn').disabled = false;
            
            // 启动自动采集
            await collect();
            collectionInterval = setInterval(collect, 1000); // 每30秒采集一次
        }

        function stopCollection() {
            if (!isCollecting) return;
            
            isCollecting = false;
            clearInterval(collectionInterval);
            document.getElementById('status').textContent = 'Stopped';
            document.getElementById('status').className = 'stopped';
            document.getElementById('startBtn').disabled = false;
            document.getElementById('stopBtn').disabled = true;
        }

        function showConfig() {
            // TODO: 显示配置对话框
            alert('Configuration feature coming soon...');
        }

        async function collect() {
            try {
                hideError();
                const response = await fetch(`${API_URL}/api/collect`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    document.getElementById('latestData').textContent = JSON.stringify(data, null, 2);
                    document.getElementById('lastCollectTime').textContent = new Date().toLocaleString();
                    collectCount++;
                    document.getElementById('collectCount').textContent = collectCount;
                } else {
                    const error = await response.json();
                    showError(`Collection failed: ${error.error}`);
                    if (error.error.includes('timeout')) {
                        // 如果是超时错误，等待5秒后重试
                        setTimeout(collect, 5000);
                    }
                }
            } catch (error) {
                showError(`Collection error: ${error.message}`);
                // 如果是连接错误，停止采集
                if (error.message.includes('Failed to fetch')) {
                    stopCollection();
                }
            }
        }

        // 页面加载时检查服务器状态
        checkServerStatus();
    </script>
</body>
</html> 